<template>
	<view class="case">
		<view class="case-top">
			<view class="case-desc ">诊疗案例（5）</view>
			<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/details-arrow-right.png"
				class="case-right"  mode="aspectFill" ></image>
		</view>
		<scroll-view class="case-scroll" scroll-x="true">
			<view  class="case-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408070935014991.png" mode="aspectFill" class="case-img"></image>
				<view class="case-title">猫下泌尿道综合征</view>
				<view class="case-labels">
					<view class="case-labels-item">宠物猫</view>
					<view class="case-labels-item">普内科</view>
				</view>
			</view>
			<view  class="case-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408070935014456.png" mode="aspectFill" class="case-img"></image>
				<view class="case-title">蠕形螨感染</view>
				<view class="case-labels">
					<view class="case-labels-item">宠物狗</view>
					<view class="case-labels-item">皮肤科</view>
				</view>
			</view>
			<view  class="case-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408070935014991.png" mode="aspectFill" class="case-img"></image>
				<view class="case-title">狗狗乳腺肿瘤</view>
				<view class="case-labels">
					<view class="case-labels-item">宠物狗</view>
					<view class="case-labels-item">肿瘤科</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	
	import sheep from '@/sheep';
	
	
</script>

<style lang="scss" scoped>
.case{
		height:360rpx;
		background:#ffffff;
		border-top-style: 1rpx solid #FAFAFA;
		font-family: Source Han Sans;
		.case-top{
			
			display:flex;
			justify-content: space-between;
			align-items: center;
			height:50rpx;
			padding: 10rpx;
			.case-desc{
				font-size: 32rpx;
				font-weight: bold;
				color: #3D3D3D;
				display:flex;
				justify-content: center;
				align-items: center;
				
			}
			
			.case-right{
				width:25rpx;
				height:25rpx;
				margin-right:10rpx;
			}
		}
		
		.case-scroll{
			white-space: nowrap;
			width: 100%;
			height:290rpx;
			margin-top:20rpx;
			.case-scroll-item{
				display: inline-block;
				width: 260rpx;
				height: 290rpx;
				margin-right:16rpx;
				margin-left:16rpx;
				.case-img{
					width:256rpx;
					height:170rpx;
					margin-left: 2rpx;
				}
				.case-title{
					height:34rpx;
					width:100%;
					font-size: 24rpx;
					font-weight: bold;
					color: #3D3D3D;
					letter-spacing:1rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					margin-top:10rpx;
				}
				.case-labels{
					display:flex;
					justify-content: center;
					align-items: center;
					margin-top:10rpx;
					.case-labels-item{
						font-size: 22rpx;
						color: #3D3D3D;
						margin-left: 10rpx;
						margin-right:10rpx;
					}
				}
			}
			
		}
	}
</style>
